<script setup lang="ts">
import { ref, PropType } from 'vue'
import { ApiCategoryItem } from '@/pages/modules/classification/types'

const $props = defineProps({
  sideList: { type: Array as PropType<ApiCategoryItem[]>, default: () => [] },
  scrollViewSideHeight: { type: Number, required: true },
})
const $emit = defineEmits(['click', 'reachBottom'])
const activeIndex = ref(0)

const handleClick = (index: number, item: ApiCategoryItem) => {
  activeIndex.value = index
  $emit('click', item)
}
</script>
<template>
  <scroll-view
    scroll-y
    :refresher-threshold="45"
    :style="{ height: $props.scrollViewSideHeight + 'px' }"
    class="side-scroll"
    @scrolltolower="$emit('reachBottom')"
  >
    <view class="ul">
      <view
        v-for="(item, index) in $props.sideList"
        :key="item.name"
        class="list"
        :class="{ active: index === activeIndex }"
        @click="handleClick(index, item)"
      >
        <view class="radius"></view>
        <view class="radius"></view>
        <view class="main" :class="{ animate__bounceIn: index === activeIndex }">
          <text class="title" :class="{ 'is-active': index === activeIndex }">{{ item.name }}</text>
        </view>
      </view>
    </view>
  </scroll-view>
</template>
<style lang="scss" scoped>
@import '@/assets/css/animate.scss';
.ul {
  height: 100%;
  width: 180rpx;
  background: #f8f8f8;
  & .list {
    width: 100%;
    font-size: 28rpx;
    position: relative;
    &.active {
      background: #fff;
      font-size: 28rpx;
      color: #333333;
      font-weight: 700;
    }
    & .radius:nth-child(1) {
      position: absolute;
      top: -30rpx;
      height: 30rpx;
      width: 100%;
      background: #fff;
      display: none;
    }
    & .radius:nth-child(1)::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-bottom-right-radius: 40rpx;
      background: #f8f8f8;
    }
    & .radius:nth-child(2) {
      position: absolute;
      bottom: -30rpx;
      height: 30rpx;
      width: 100%;
      background: #fff;
      display: none;
    }
    & .radius:nth-child(2)::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-top-right-radius: 40rpx;
      background: #f8f8f8;
    }
    &.active .radius:nth-child(1),
    &.active .radius:nth-child(2),
    &.active .main .icon_box .icon {
      display: block;
    }
    & .main {
      display: block;
      width: 100%;
      color: #3c3c3c;
      display: flex;
      justify-content: center;
      align-items: center;
      & .is-active {
        position: relative;
        width: 100%;
        &::before {
          content: '';
          height: 30rpx;
          position: absolute;
          width: 8rpx;
          background: #f12f22;
          display: inline-block;
          left: 10rpx;
          /* margin-right: 30rpx; */
        }
      }
      & .title {
        display: flex;
        height: 100rpx;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
.side-scroll {
  width: auto;
}
</style>
